{extend name="layout/base"}

{block name="content"}
<div>   
    <table id="demo" lay-filter="test"></table>
</div>
<div  id="addimg" style="display: none;padding: 15px;">
    <div class="pushimg">
        <img src="" alt="" id="only">
        <button type="button" class="layui-btn chhoseBtn" id="test1">
            <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
    </div>   
</div>
<div id="add" style="display: none;padding: 15px;">
    <form class="layui-form" lay-filter="form1">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-inline" style="width: 220px;">
                <input type="text" name="title" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-inline" style="width: 120px;">
                <input type="number" name="sort" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">请输入数字</div>
        </div>
        <div class="layui-form-item">
          <div  style="text-align: center;">
            <button class="layui-btn" lay-submit lay-filter="submitadd">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
</div>
<script type="text/html" id="headerBal">
    <a lay-event="add" class="layui-btn layui-btn-primary">添加</a>
</script>
<script type="text/html" id="imgbtn">
    <button type="button" class="layui-btn layui-btn-sm layui-btn" lay-event="upload">上传</button>
</script>
<script type="text/html" id="status">
    {{# if(d.status == 2){  }}      
        <input type="checkbox" name="status" lay-skin="switch" checked lay-text="开启|停用"  value= {{ d.status}} data-cid="{{ d.cid}}" lay-filter="statusfilter" >
    {{# }else{ }}         
        <input type="checkbox" name="status" lay-skin="switch" lay-text="开启|停用"  value= {{ d.status}} data-cid="{{ d.cid}}" lay-filter="statusfilter" >
    {{# } }}
</script>
<script type="text/html" id="ico">
    {{# if(d.ico !=""){}}
    <img src="{{d.ico}}" width="28" height="28">
    {{#}else{ }}
    <span>无</span>
    {{# }}}
</script>
<script>
layui.use(['jquery', 'table','upload','form'], function () {
    var $ = layui.jquery,
        table = layui.table,
        upload = layui.upload,
        form = layui.form;
    var tablelist= table.render({
        elem: '#demo',
        url: 'lists',
        toolbar: '#headerBal',
        page: true, 
        cols: [[
        {field: 'cid', title: 'ID'},
        {field: 'title', title: '分类名'},
        {field: 'sort', title: '排序'},
        {field: 'status', title: '状态',templet:'#status'},
        {field: 'ctime', title: '创建时间',templet : "<div>{{layui.util.toDateString(d.ctime*1000, 'yyyy-MM-dd HH:mm:ss')}}</div>"},
        {field: 'ico', title: '图标',templet:'#ico'},
        {field: 'done', title: '图片上传',templet:"#imgbtn"},
        ]]
    });
    //监听工具条 
    var index1
    table.on('tool(test)', function(obj){ 
        var data = obj.data;
        var layEvent = obj.event;         
        if(layEvent === 'upload'){
            index1 = layer.open({
                type: 1,
                title:'图片添加',
                area: ['300px','300px'],
                content:$('#addimg')
            });
            var uploadInst = upload.render({
                elem: '#test1', //绑定元素
                url: 'uploads?cid='+data.cid, //上传接口
                choose:function(obj){
                    obj.preview(function(index,file,result){
                        $('#only').attr('src', result);
                    });
                },
                done: function(res){
                    if(res.code == 0){
                        layer.msg(res.msg);
                        uploadInst.reload()
                        tablelist.reload();
                        layer.close(index1)
				    }else{
                        layer.msg(res.msg);
                        uploadInst.reload()
                        layer.close(index1)
                    }
                //上传完毕回调
                },
                error: function(){
                    layer.msg('上传失败');
                //请求异常回调
                }
            });
        } 
    });
    var index1
    table.on('toolbar()',function(obj){
        switch(obj.event){
            case 'add':
            index1 = layer.open({
                type: 1,
                area: ['450px','auto'],
                content:$('#add')
            });
            break
        }
    })
    form.on('submit(submitadd)', function(data){
        $.ajax({
            type:'post',
            data:{
                title:data.field.title,
                sort: data.field.sort
            },
            url:'addCate',
            success:function(res){
                if(res.code == 0){
                    cardlist.reload()
                    layer.close(index1)
                }else{
                    console.log(res.msg)
                }
                
            }
        })
        return false; 
    }); 
    form.on('switch(statusfilter)', function(data){
        var cid = $(this).data('cid'); //开关value值，也可以通过data.elem.value得到
        $.ajax({
            url:'setStatus',
            type:'post',
            data:{
                cid:cid
            },
            success:function(res){
                if(res.code == 0){
                    layer.msg(res.msg)
                }
            }
        })
    });  
}) 
</script>
{/block}